<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<title>Document</title>
	<script>
        (function(){
        	setRem();
        	window.addEventListener('orientation' in window?"deviceorientation":"resize",setRem);
        	function setRem(){
	        	var html = document.documentElement;
	            var hWidth = html.getBoundingClientRect().width;
	            html.style.fontSize = hWidth/15+'px';
        	}   
        })()
    </script>
    
	<style>
		* {margin: 0;padding: 0; -webkit-tap-highlight-color: transparent; -webkit-box-sizing: border-box;box-sizing: border-box;}
        body,html{width:100%;overflow: auto;background: #fff;color: #333;}
        img{border:none;vertical-align: middle;}
        body {font-size: 14px;font-family: "MicroSoft YaHei", sans-serif;color: #333;}
        a {color: #333;text-decoration: none;}
        input {border: none;outline: none; -webkit-appearance: none;}
        ul,ol {list-style: none;}
        header{width: 100%;height: 1.7rem;border:1px solid #bfbfbf;border-width: 0 0 1px 0;background-size: 100% 44px;background-color: #fff;clear: both;overflow: hidden;}
        header .back{float:left;width: 10%;height:100%;display: block;}
        header .back span{display: block;width: 60%;height: 60%;background: url(https://st.360buyimg.com/common/commonH_B/images/2015/jd-sprites.png?v=12) no-repeat;-webkit-background-size: 10rem 9rem;margin:.3rem .3rem;
        background-size: 10rem 10rem;background-position: -1.2rem 0;}
        header .menu{float:right;width: 10%;height:100%;}
        header .menu span{display: block;width: 63%; height: 63%;background: url(http://www.qbys.cn/skin/default/mobile/images/personal.png) no-repeat;margin: .3rem .3rem;-webkit-background-size: 100% 100%;
        background-size: 90% 90%;}
		header h2{text-align: center;line-height: 1.7rem;margin:0 auto;font-size:.7rem;}
		#gotop{width: 2rem;height: 2rem;border-radius: 50%;border: 1px solid #eee;background-color:rgba(0,0,0,0.5);position: fixed;right: .7rem;bottom: 4rem;display: none;}
		#gotop span{display: block;background:url()no-repeat; width: 80%;height: 80%;-webkit-background-size: 70%;margin:.4rem .4rem;}
		#imgnav{width: 100%;height: 10rem;clear: both;overflow: hidden;margin-top:1px;}
		#imgnav .i-left{float: left;width:7.3rem;height: 100%;}
		#imgnav .i-left img{width: 100%;height: 100%;margin-left: -1px;}
		#imgnav .i-right {float: right;height: 100%;width: 7.3rem;}
		#imgnav .i-right a{width: 100%;height: 4.8rem;display: block;}
		#imgnav .i-right a img{width: 100%;height: 100%;}
		#imgnav .i-right a:first-child{margin-bottom: .4rem;}
		section{width: 100%;}
		#list{width: 100%;}
		#list a{display: block;width: 100%;height: 5.8rem;clear: both;border-bottom:.1rem solid rgb(236,236,236);padding: .1rem .2rem; box-sizing: border}
		#list a:last-child{border:none;}
		#list a img{display:block;float: left;width: 40%;height: 100%;}
		#list a div{float: right;height: 100%;width: 55%;padding:.1rem .2rem;}
		#list a div .title{font-size: .6rem;font-weight: bolder;line-height: 1rem}
		#list a div .ads{color: rgb(102,165,55);line-height: 1rem;}
		#list a div .price{color: rgb(226,83,15);font-size: 1.7rem;}
		#list a div .pcs{font-size: .5rem;}
		#container{width: 100%;}
		#container a{display: block;width: 100%;height: 5.8rem;clear: both;border-bottom:.1rem solid rgb(236,236,236);padding: .1rem .2rem; box-sizing: border}
		#container a:last-child{border:none;}
		#container a img{display:block;float: left;width: 40%;height: 100%;}
		#container a div{float: right;height: 100%;width: 55%;padding:.1rem .2rem;}
		#container a div .title{font-size: .6rem;font-weight: bolder;line-height: 1rem}
		#container a div .ads{color: rgb(102,165,55);line-height: 1rem;}
		#container a div .price{color: rgb(226,83,15);font-size: 1.7rem;}
		#container a div .pcs{font-size: .5rem;}
		footer{width: 100%;height: 1rem;margin-top:1rem;}
		footer p{font-size: .5rem;color: #666;text-align: center;line-height: .5rem;}
	</style>
	
</head>
<body>
	<header>
		<a class="back" href="http://www.qbys.cn/mobile/index.php?moduleid=16&action=cate">
			<span></span>
		</a>
		<a class="menu" href="http://www.qbys.cn/mobile/index.php?moduleid=2&action=login">
			<span></span>
		</a>
		<h2>美味生鲜</h2>
	</header>
	<div id="imgnav">
		<a href="###" class="i-left">
			<img src="http://d9.yihaodianimg.com/N08/M05/8D/57/ChEi1VjBD7GAUG0yAADEc7gosbU57800_290x400.webp">
		</a>
		<div class="i-right">
			<a href="###">
				<img src="http://d6.yihaodianimg.com/N10/M09/8F/00/ChEi21jA7NyAD3z4AAAqpnUuiWM67300_290x190.webp">
			</a>
			<a href="###">
				<img src="http://d7.yihaodianimg.com/N08/M02/6E/D7/ChEi1VizgmmAZ7zQAAA4EVA437Q13900_290x190.webp">
			</a>
		</div>
	</div>
	<section>
		<div id="list">
			<a href="###">
				<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3709/334/1378702984/206759/5c100ab5/58253588Naaa05c5c.jpg!q50.jpg.webp">
				<div>
					<span class="title">树懒果园 泰国进口大金煌芒果 2.5kg 单果600-1200g</span><br>
					<span class="ads">秦巴专营&nbsp;品质保障</span><br>
					<span class="price">￥79.9</span>
					<span class="pcs">元/盒</span>
				</div>
			</a>
			<a href="###">
				<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3643/111/394078676/159202/a59f6b72/5809b3ccN41e5e01f.jpg!q50.jpg.webp">
				<div>
					<span class="title">树懒果园 泰国进口大金煌芒果 2.5kg 单果600-1200g</span><br>
					<span class="ads">秦巴专营&nbsp;品质保障</span><br>
					<span class="price">￥216.5</span>
					<span class="pcs">元/盒</span>
				</div>
			</a><a href="###">
				<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3445/57/1163055698/202478/20a0e80c/581fe801N83efd89c.jpg!q50.jpg.webp">
				<div>
					<span class="title">树懒果园 泰国进口大金煌芒果 2.5kg 单果600-1200g</span><br>
					<span class="ads">秦巴专营&nbsp;品质保障</span><br>
					<span class="price">￥33</span>
					<span class="pcs">元/盒</span>
				</div>
			</a>
			<a href="###">
				<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3586/172/955140469/150635/b6609c93/5817ff80N906bad34.jpg!q50.jpg.webp">
				<div>
					<span class="title">树懒果园 泰国进口大金煌芒果 2.5kg 单果600-1200g</span><br>
					<span class="ads">秦巴专营&nbsp;品质保障</span><br>
					<span class="price">￥79.9</span>
					<span class="pcs">元/盒</span>
				</div>
			</a>
			<a href="###">
				<img src="https://m.360buyimg.com/babel/s579x579_jfs/t3709/334/1378702984/206759/5c100ab5/58253588Naaa05c5c.jpg!q50.jpg.webp">
				<div>
					<span class="title">树懒果园 泰国进口大金煌芒果 2.5kg 单果600-1200g</span><br>
					<span class="ads">秦巴专营&nbsp;品质保障</span><br>
					<span class="price">￥79.9</span>
					<span class="pcs">元/盒</span>
				</div>
			</a>
		</div>
		<div id="container"></div>
		<div id="gotop">
			<span></span>
		</div>
	</section>
	<footer>
		<p>上滑加载更多</p>
		<input type="hidden" id="page" value="0">
	</footer>
	<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script>
    	$(function(){	

			$(window).bind('scroll',getScrollHeight);

			function getScrollHeight(){		

				if($(window).scrollTop() >= 130){

					$('#gotop').fadeIn(300); 

				}else{    

					$('#gotop').fadeOut(300);    

				}  

			}

			$('#gotop').on('touchend',function(ev){

				$('html,body').animate({scrollTop: '0px'}, 300);

				ev.preventDefault();
			});

		});//返回顶部功能
    </script>

    <script>

        $(window).bind('scroll',function(){

        	 if ($(document).scrollTop() >= $(document).height() - $(window).height()){

        	 	loadingmore();

        	 }
        });
    	
        function loadingmore() {
                
             $.getJSON('1.json',function(data){

		    	if(data){

		    		var htm='';


		    		$.each(data,function(index,val){

		    			htm += "<a href="+val.item+"><img src="+val.imgurl+"><div><span class='title'>"+val.title+"</span><br><span class='ads'>秦巴专营&nbsp;品质保障</span><br><span class='price'>￥"+val.price+"</span><span class='pcs'>元/盒</span></div></a>"

		    			$("#container").html(htm);

		    			if(index == data.length-1){

                    		$("footer p").text('没有更多产品了');

                    	}
		    		})
		    	}else{

		    		$("footer p").text("没有更多产品了");
		    	}
		    })
        }

    </script>
    
</body>
</html>